<template>
  <div class="timeBarContainer">
    <div class="expandButton" @click="$emit('showDrag')">
      <div class="whiteLine"></div>
      <div class="whiteLine"></div>
      <div class="whiteLine"></div>
    </div>
    <div class="timeBar" v-if="isTimeOperator">
      <div class="controlGroup">
        <img
          class="controlIcon"
          @click="startIndex"
          src="../assets/TimeBar/LL.png"
        />
        <img
          class="controlIcon"
          @click="lastIndex"
          src="../assets/TimeBar/L.png"
        />
        <img
          v-if="!isStop"
          @click="toggleStop"
          class="controlIcon"
          src="../assets/TimeBar/stop.png"
        />
        <img
          v-if="isStop"
          @click="toggleStop"
          class="controlIcon"
          src="../assets/TimeBar/start.png"
        />
        <img
          class="controlIcon"
          @click="nextIndex"
          src="../assets/TimeBar/R.png"
        />
        <img
          class="controlIcon"
          @click="finalIndex"
          src="../assets/TimeBar/RR.png"
        />
      </div>
      <div class="progress-bar-container">
        <VueSlider
          class="slider"
          v-model="value"
          :interval="10"
          :data="dateArr"
          ref="slider"
          :tooltip="'active'"
          :adsorb="true"
          :marks="true"
          :hide-label="true"
          :drag-on-click="true"
          :lazy="true"
        ></VueSlider>
        
        <el-select
          v-model="value2"
          class="m-2 dateSelect"
          placeholder="Select"
          :disabled="isDisabled"
        >
          <el-option
            v-for="item in dateArr2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
// import component
import VueSlider from "vue-slider-component/dist-css/vue-slider-component.umd.min.js";
import "vue-slider-component/dist-css/vue-slider-component.css";

// import theme
import "vue-slider-component/theme/default.css";
import { forEach } from "lodash";

export default {
  components: {
    VueSlider,
  },
  props: {
    timeMenu: {
      type: Array,
      require: true,
    },
    viewTime: {
      type: Object,
    },
    predictVal: {
      type: Number,
    },
    timeIndex: {
      type: Number,
      default: 0,
    },
    isTimeOperator: {
      type: Boolean,
      default: true,
    },
    predictLock: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    viewTime(newValue, oldValue) {
      if (newValue.predict) {
        this.originalDate = new Date(
          newValue.year,
          newValue.month,
          newValue.date,
          newValue.hours,
          newValue.minutes
        );
        const tempOrgDate = new Date(this.originalDate);
        let DateArr = [];
        const tempItem1 = {
          label: this.getLabel(this.originalDate),
          value: this.getLabel(this.originalDate),
        };
        // if (this.value2 !== tempItem1) {
        // this.updateLock2 = true;
        // }
        this.value2 = tempItem1;
        // DateArr.push(tempItem1);
        const predictArr = this.generateArray(newValue.predict);
        if (newValue.predict.type === "hours") {
          predictArr.forEach((update) => {
            let tempDate = new Date(tempOrgDate);
            tempDate.setHours(this.originalDate.getHours() + update);
            const tempItem = {
              label: this.getLabel(tempDate),
              value: this.getLabel(tempDate),
              data: update,
            };
            DateArr.push(tempItem);
          });
        } else if (newValue.predict.type === "minutes") {
          predictArr.forEach((update) => {
            let tempDate = new Date(tempOrgDate);
            tempDate.setMinutes(tempOrgDate.getMinutes() + update);
            const tempItem = {
              label: this.getLabel(tempDate),
              value: this.getLabel(tempDate),
              data: update,
            };
            DateArr.push(tempItem);
          });
        }
        this.dateArr = DateArr;
        this.dateArr2 = [this.value2];
        this.isDisabled = true;
        this.type = "predict";
        const index =
          this.$refs.slider?.getIndex() >= 0
            ? this.$refs.slider.getIndex()
            : -1;
        let tempVal1 = this.dateArr[index].value;
        if (this.value !== tempVal1) {
          this.updateLock1 = true;
        }
        this.value = tempVal1;
      } else {
        //需要改
        const menu = this.timeMenu[this.timeIndex];
        const startTime = menu.startTime;
        const endTime = menu.endTime;
        const dates = this.getDatesBetween(startTime, endTime);
        let DateArr2 = [];
        dates.forEach((date) => {
          const tempItem = {
            label: this.getLabel(date, 1, false),
            value: this.getLabel(date, 1, false),
          };
          DateArr2.push(tempItem);
        });
        const tempDate = new Date(
          newValue.year,
          newValue.month,
          newValue.date,
          newValue.hours,
          newValue.minutes
        );
        this.dateArr2 = DateArr2;
        this.isDisabled = false;
        let tempVal2 = this.getLabel(tempDate, 0, false);
        if (this.value2 !== tempVal2) {
          this.updateLock2 = true;
        }
        this.value2 = tempVal2;
        this.dateArr = this.buildTimeArray(
          newValue.timeStart,
          newValue.timeEnd,
          menu.minuteInterval,
          menu.hourInterval
        );

        this.type = "noPrdict";
        const time = this.findTime(
          newValue.hours,
          newValue.minutes,
          this.dateArr
        );
        if (this.value !== time) {
          this.updateLock1 = true;
        }
        this.value = time ? time : this.dateArr[-1];
      }
    },
    $route(to) {
      if (this.$route.name === "yuntu") {
        const dates = [
          "2023 09 03 18 00",
          "2023 09 03 10 45",
          "2023 09 03 21 00",
          "2023 09 03 11 00",
          "2023 09 03 15 00",
          "2023 09 03 12 00",
          "2023 09 03 19 00",
          "2023 09 03 23 15",
          "2023 09 03 00 00",
          "2023 09 03 08 00",
          "2023 09 03 22 45",
          "2023 09 03 13 45",
          "2023 09 03 07 45",
          "2023 09 03 14 15",
          "2023 09 03 17 00",
          "2023 09 03 16 00",
          "2023 09 03 11 15",
          "2023 09 03 04 45",
          "2023 09 03 09 00",
          "2023 09 03 16 45",
          "2023 09 03 08 15",
          "2023 09 03 20 15",
          "2023 09 03 06 00",
          "2023 09 03 05 00",
          "2023 09 03 05 15",
          "2023 09 03 20 00",
          "2023 09 03 14 00",
          "2023 09 03 19 45",
          "2023 09 03 13 00",
          "2023 09 03 22 00",
          "2023 09 03 07 00",
          "2023 09 03 23 00",
          "2023 09 03 17 15",
          "2023 08 03 05 00",
          "2023 08 04 10 45",
          "2023 08 10 03 00",
          "2023 08 02 05 00",
          "2023 08 02 07 45",
          "2023 08 03 14 15",
          "2023 08 10 05 15",
          "2023 08 04 02 00",
          "2023 08 10 00 00",
          "2023 08 03 18 00",
          "2023 08 03 06 00",
          "2023 08 03 08 00",
          "2023 08 10 04 45",
          "2023 08 02 11 00",
          "2023 08 02 17 15",
          "2023 08 03 15 00",
          "2023 08 10 01 00",
          "2023 08 02 17 00",
          "2023 08 04 08 00",
          "2023 08 02 16 00",
          "2023 08 02 20 15",
          "2023 08 10 18 00",
          "2023 08 02 01 45",
          "2023 08 10 07 00",
          "2023 08 10 11 00",
          "2023 08 10 17 00",
          "2023 08 03 07 45",
          "2023 08 10 21 00",
          "2023 08 03 08 15",
          "2023 08 03 12 00",
          "2023 08 03 13 45",
          "2023 08 04 14 15",
          "2023 08 04 19 00",
          "2023 08 04 13 00",
          "2023 08 10 15 00",
          "2023 08 10 19 45",
          "2023 08 04 21 00",
          "2023 08 03 02 15",
          "2023 08 02 06 00",
          "2023 08 02 13 00",
          "2023 08 02 08 00",
          "2023 08 10 14 15",
          "2023 08 04 16 00",
          "2023 08 03 19 45",
          "2023 08 03 19 00",
          "2023 08 04 20 00",
          "2023 08 03 21 00",
          "2023 08 02 01 00",
          "2023 08 02 19 00",
          "2023 08 03 17 00",
          "2023 08 02 23 00",
          "2023 08 02 16 45",
          "2023 08 04 07 45",
          "2023 08 04 18 00",
          "2023 08 03 23 15",
          "2023 08 10 02 00",
          "2023 08 10 16 00",
          "2023 08 03 09 00",
          "2023 08 04 23 15",
          "2023 08 03 20 00",
          "2023 08 03 11 00",
          "2023 08 03 17 15",
          "2023 08 03 23 00",
          "2023 08 03 10 00",
          "2023 08 10 07 45",
          "2023 08 04 05 15",
          "2023 08 04 22 00",
          "2023 08 03 16 00",
          "2023 08 03 22 00",
          "2023 08 04 04 00",
          "2023 08 03 13 00",
          "2023 08 03 01 00",
          "2023 08 04 09 00",
          "2023 08 02 18 00",
          "2023 08 10 22 45",
          "2023 08 02 05 15",
          "2023 08 03 07 00",
          "2023 08 03 00 00",
          "2023 08 03 14 00",
          "2023 08 02 22 00",
          "2023 08 04 05 00",
          "2023 08 10 20 00",
          "2023 08 10 11 15",
          "2023 08 02 14 15",
          "2023 08 04 06 00",
          "2023 08 10 12 00",
          "2023 08 02 15 00",
          "2023 08 10 04 00",
          "2023 08 04 08 15",
          "2023 08 04 10 00",
          "2023 08 02 13 45",
          "2023 08 10 10 00",
          "2023 08 03 11 15",
          "2023 08 10 13 00",
          "2023 08 10 16 45",
          "2023 08 04 04 45",
          "2023 08 10 23 00",
          "2023 08 04 07 00",
          "2023 08 10 10 45",
          "2023 08 10 05 00",
          "2023 08 04 01 00",
          "2023 08 03 01 45",
          "2023 08 03 05 15",
          "2023 08 04 00 00",
          "2023 08 10 13 45",
          "2023 08 03 02 00",
          "2023 08 04 11 00",
          "2023 08 04 17 15",
          "2023 08 02 04 45",
          "2023 08 02 20 00",
          "2023 08 02 08 15",
          "2023 08 04 23 00",
          "2023 08 10 08 00",
          "2023 08 02 02 00",
          "2023 08 03 04 45",
          "2023 08 04 20 15",
          "2023 08 10 09 00",
          "2023 08 04 01 45",
          "2023 08 02 10 45",
          "2023 08 10 17 15",
          "2023 08 04 12 00",
          "2023 08 03 22 45",
          "2023 08 02 00 00",
          "2023 08 03 03 00",
          "2023 08 10 01 45",
          "2023 08 04 13 45",
          "2023 08 02 10 00",
          "2023 08 10 22 00",
          "2023 08 10 19 00",
          "2023 08 04 03 00",
          "2023 08 03 16 45",
          "2023 08 10 23 15",
          "2023 08 10 06 00",
          "2023 08 03 10 45",
          "2023 08 02 14 00",
          "2023 08 10 14 00",
          "2023 08 04 17 00",
          "2023 08 04 15 00",
          "2023 08 10 08 15",
          "2023 08 04 14 00",
          "2023 08 04 19 45",
          "2023 08 02 21 00",
          "2023 08 04 22 45",
          "2023 08 02 22 45",
          "2023 08 02 12 00",
          "2023 08 04 16 45",
          "2023 08 03 04 00",
          "2023 08 02 04 00",
          "2023 08 10 02 15",
        ].map((str) => {
          const [year, month, day, hour, minute] = str.split(" ").map(Number);
          return new Date(year, month - 1, day, hour, minute);
        });
        this.buildDateArrays(dates);
        this.type = "yuntu";
      } else if (this.$route.name === "typhoon") {
        const dates = [
          "2023 08 28 00 00",
          "2023 08 28 06 00",
          "2023 08 28 09 00",
          "2023 08 28 12 00",
          "2023 08 28 18 00",
          "2023 08 28 21 00",
          "2023 08 29 00 00",
          "2023 08 29 06 00",
          "2023 08 29 09 00",
          "2023 08 29 12 00",
          "2023 08 29 18 00",
          "2023 08 29 21 00",
          "2023 08 30 00 00",
          "2023 08 30 06 00",
          "2023 08 30 09 00",
          "2023 08 30 12 00",
          "2023 08 30 18 00",
          "2023 08 30 21 00",
          "2023 08 31 00 00",
          "2023 08 31 06 00",
          "2023 08 31 09 00",
          "2023 08 31 12 00",
          "2023 08 31 18 00",
          "2023 08 31 21 00",
          "2023 09 01 00 00",
          "2023 09 01 03 00",
          "2023 09 01 06 00",
          "2023 09 01 09 00",
          "2023 09 01 12 00",
          "2023 09 01 15 00",
          "2023 09 01 18 00",
          "2023 09 01 21 00",
          "2023 09 02 00 00",
          "2023 09 02 03 00",
          "2023 09 02 06 00",
          "2023 09 02 09 00",
          "2023 09 02 12 00",
          "2023 09 02 15 00",
          "2023 09 02 18 00",
          "2023 09 02 21 00",
          "2023 09 03 00 00",
          "2023 09 03 03 00",
          "2023 09 03 06 00",
          "2023 09 03 09 00",
          "2023 09 03 12 00",
          "2023 09 03 15 00",
          "2023 09 03 18 00",
          "2023 09 03 21 00",
          "2023 09 04 00 00",
          "2023 09 04 03 00",
          "2023 09 04 06 00",
          "2023 09 04 09 00",
          "2023 09 04 12 00",
          "2023 09 04 15 00",
          "2023 09 04 18 00",
          "2023 09 04 21 00",
          "2023 09 05 00 00",
          "2023 09 05 03 00",
          "2023 09 05 06 00",
          "2023 09 05 09 00",
          "2023 09 05 12 00",
          "2023 09 05 15 00",
          "2023 09 05 18 00",
          "2023 09 05 21 00",
          "2023 09 06 00 00",
          "2023 09 06 03 00",
          "2023 09 06 06 00",
        ].map((str) => {
          const [year, month, day, hour, minute] = str.split(" ").map(Number);
          return new Date(year, month - 1, day, hour, minute);
        });
        this.buildDateArrays(dates);
        this.type = "typhoon";
      } else if (this.$route.name === "GBA") {
        const dates = [
          "2023 09 07 12 00",
          "2023 09 07 12 30",
          "2023 09 07 13 00",
          "2023 09 07 13 30",
          "2023 09 07 14 00",
          "2023 09 07 14 30",
          "2023 09 07 15 00",
          "2023 09 07 15 30",
          "2023 09 07 16 00",
          "2023 09 07 16 30",
          "2023 09 07 17 00",
          "2023 09 07 17 30",
          "2023 09 07 18 00",
          "2023 09 07 18 30",
        ].map((str) => {
          const [year, month, day, hour, minute] = str.split(" ").map(Number);
          return new Date(year, month - 1, day, hour, minute);
        });
        this.buildDateArrays(dates);
        this.type = "GBA";
      } else if (this.$route.name === "SZ") {
        const dates = [
          "2023 09 07 12 00",
          "2023 09 07 12 30",
          "2023 09 07 13 00",
          "2023 09 07 13 30",
          "2023 09 07 14 00",
          "2023 09 07 14 30",
          "2023 09 07 15 00",
          "2023 09 07 15 30",
          "2023 09 07 16 00",
          "2023 09 07 16 30",
          "2023 09 07 17 00",
          "2023 09 07 17 30",
          "2023 09 07 18 00",
          "2023 09 07 18 30",
        ].map((str) => {
          const [year, month, day, hour, minute] = str.split(" ").map(Number);
          return new Date(year, month - 1, day, hour, minute);
        });
        this.buildDateArrays(dates);
        this.type = "SZ";
      }
    },
    predictVal(newVal) {
      if ((this.type = "predict")) {
        this.updateLock1 = true;
        let foundItem = this.dateArr.find((item) => item.data === newVal);
        if (foundItem) {
          this.value = foundItem.value;
        }
        if (this.value2 && this.value2.value) {
          let dateString = this.value2;
          dateString = dateString.value.replace(",", " ");
          let dateObject = {
            startTime: new Date(dateString),
            predictTime: this.predictVal,
          };
          this.$emit("getTotalData", dateObject);
        }
      }
    },
    isStop(newValue, oldValue) {
      if (newValue === false) {
        this.$refs.slider.setIndex(this.$refs.slider.getIndex() + 1);
        this.$refs.slider.focus(this.$refs.slider.getIndex());
        this.timer = setInterval(() => {
          this.$refs.slider.setIndex(this.$refs.slider.getIndex() + 1);
          this.$refs.slider.focus(this.$refs.slider.getIndex());
        }, 1000);
      } else {
        if (this.timer) {
          clearInterval(this.timer); // 清除定时器
        }
      }
    },
    value(newValue, oldValue) {
      if (this.type === "predict") {
        // if(this.predictLock) {
        //   this.$emit("changePredictLock", false);
        //   return
        // }
        let barTime = this.$refs.slider.getIndex();
        this.$emit("changeBarTime", barTime);
      } else if (this.type === "yuntu" || this.type === "typhoon" || this.type === "GBA" || this.type === "SZ") {
        let tempStr = this.value;
        const [datePart, timePart] = tempStr.split(",");
        const [year, month, day] = datePart.split("/").map(Number);
        const [hour, minute] = timePart.split(":").map(Number);
        let barTime = new Date(year, month - 1, day, hour, minute);
        this.$emit("getTotalData", barTime);
      } else {
        let barTime = new Date(`${this.value2} ${this.value}`);
        this.$emit("getTotalData", barTime);
      }
      if (!this.updateLock1) {
        if (this.type === "predict") {
          if (this.$refs.slider?.getIndex()) {
            let barTime = this.$refs.slider.getIndex();
            this.$emit("changeBarTime", barTime);
          }
        } else if (this.type === "yuntu" || this.type === "typhoon" || this.type === "GBA" || this.type === "SZ") {
          let tempStr = this.value;
          const [datePart, timePart] = tempStr.split(",");
          const [year, month, day] = datePart.split("/").map(Number);
          const [hour, minute] = timePart.split(":").map(Number);
          let barTime = new Date(year, month - 1, day, hour, minute);
          this.$emit("getTotalData", barTime);
        } else {
          let barTime = new Date(`${this.value2} ${this.value}`);
          this.$emit("changeBarTime", barTime);
        }
      } else {
        this.updateLock1 = !this.updateLock1;
      }
    },
    value2(newValue, oldValue) {
      if (!this.updateLock2) {
        if (this.type === "predict") {
          //不能改
          if (this.value2 && this.value2.value) {
            let dateString = this.value2;
            dateString = dateString.value.replace(",", " ");
            let dateObject = {
              startTime: new Date(dateString),
              predictTime: this.predictVal,
            };
            this.$emit("getTotalData", dateObject);
          }
        } else if (this.type === "yuntu" || this.type === "typhoon" || this.type === "GBA" || this.type === "SZ") {
          this.updateDateArr(this.value2);
        } else {
          //2023/08/01
          let barTime = new Date(`${this.value2} ${this.value}`);
          this.$emit("changeBarTime", barTime);
        }
      } else {
        this.updateLock2 = false;
      }
    },
  },
  data() {
    return {
      isDisabled: false,
      isStop: true,
      value: "",
      value2: "",
      originalDate: null,
      dateArr: [],
      dateArr2: [],
      timer: null,
      type: "predict",
      updateLock1: false,
      updateLock2: false,
      fullDateMap: {},
    };
  },
  methods: {
    buildDateArrays(dates) {
      dates.sort((a, b) => a - b);

      this.dateArr2 = [
        ...new Map(
          dates.map((date) => {
            const labelValue = this.getLabel(date, 1, false);
            return [labelValue, { label: labelValue, value: labelValue }];
          })
        ).values(),
      ];

      this.fullDateMap = dates.reduce((acc, date) => {
        const dateLabel = this.getLabel(date, 1, false);
        const timeLabel = this.getLabel(date, 1, true);
        if (!acc[dateLabel]) {
          acc[dateLabel] = [];
        }
        acc[dateLabel].push({ label: timeLabel, value: timeLabel });
        return acc;
      }, {});

      if (this.dateArr2.length > 0) {
        this.value2 = this.dateArr2[0].value;
        this.updateDateArr(this.value2);
      }
    },
    updateDateArr(selectedValue) {
      this.dateArr = this.fullDateMap[selectedValue] || [];
      this.value = this.dateArr[0]?.value || "";
    },
    findTime(hours, minutes, timeArr) {
      if (!timeArr) return;
      let hoursStr = hours.toString().padStart(2, "0");
      let minutesStr = minutes.toString().padStart(2, "0");
      let timeStr = hoursStr + ":" + minutesStr;
      let foundTime = timeArr.find((time) => time === timeStr);
      return foundTime || "";
    },
    formatTime(hours, minutes) {
      return `${hours.toString().padStart(2, "0")}:${minutes
        .toString()
        .padStart(2, "0")}`;
    },

    buildTimeArray(timeStart, timeEnd, minuteInterval, hourInterval) {
      let timeArray = [];
      let currentHour = timeStart.hours;
      let currentMinute = timeStart.minutes;

      while (
        currentHour < timeEnd.hours ||
        (currentHour === timeEnd.hours && currentMinute <= timeEnd.minutes)
      ) {
        timeArray.push(this.formatTime(currentHour, currentMinute));

        if (minuteInterval !== 0) {
          currentMinute += minuteInterval;
          if (currentMinute >= 60) {
            currentHour += Math.floor(currentMinute / 60);
            currentMinute %= 60;
          }
        } else {
          currentHour += hourInterval;
        }
      }

      return timeArray;
    },
    getDatesBetween(startDate, endDate) {
      let dates = [];
      let currentDate = new Date(startDate);
      // 将结束日期的时间调整为当天最后一刻，确保包括结束日期那一天
      endDate = new Date(endDate);
      endDate.setHours(23, 59, 59, 999);
      // 当当前日期小于或等于结束日期时循环
      while (currentDate <= endDate) {
        // 将当前日期添加到数组中
        dates.push(new Date(currentDate));
        // 将当前日期增加一天
        currentDate.setDate(currentDate.getDate() + 1);
      }

      return dates;
    },
    getLabel(date, monthAdd = 0, needHM = true) {
      const day = this.padSingleDigit(date.getDate());
      const month = this.padSingleDigit(date.getMonth() + monthAdd);
      const year = this.padSingleDigit(date.getFullYear());
      const hour = this.padSingleDigit(date.getHours());
      const minute = this.padSingleDigit(date.getMinutes());
      if (needHM) {
        return `${year}/${month}/${day},${hour}:${minute}`;
      } else {
        return `${year}/${month}/${day}`;
      }
    },
    padSingleDigit(number) {
      if (0 <= number && number < 10) {
        return `0${number}`;
      }
      return `${number}`;
    },

    toggleStop() {
      this.isStop = !this.isStop;
    },
    generateArray(item) {
      const rangeParts = item.scope.split("-").map(Number);
      const start = rangeParts[0];
      const end = rangeParts[1];
      const interval = item.interval;
      const extraArray = item.additional;
      let array = [];
      for (let i = start; i <= end; i += interval) {
        array.push(i);
      }
      return array.concat(extraArray).sort((a, b) => a - b);
    },
    nextIndex() {
      this.$refs.slider.setIndex(this.$refs.slider.getIndex() + 1);
      this.$refs.slider.focus(this.$refs.slider.getIndex());
    },
    lastIndex() {
      this.$refs.slider.setIndex(this.$refs.slider.getIndex() - 1);
      this.$refs.slider.focus(this.$refs.slider.getIndex());
    },
    finalIndex() {
      this.$refs.slider.setIndex(this.dateArr.length - 1);
      this.$refs.slider.focus(this.$refs.slider.getIndex());
    },
    startIndex() {
      this.$refs.slider.setIndex(0);
      this.$refs.slider.focus(this.$refs.slider.getIndex());
    },
  },
};
</script>

<style scoped>
.timeBarContainer {
  display: flex;
  width: 100vw;
  height: 10vh;
  z-index: 1000;
  position: absolute;
  top: 82vh;
  gap: 3vw;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.expandButton {
  width: 4vw;
  height: 4vw;
  opacity: 1;
  background: rgba(4, 38, 56, 0.64);
  left: 8vw;
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10%;
  align-items: center;
  justify-content: center;
}
.whiteLine {
  width: 65%;
  height: 5%;
  background-color: #fff;
  border-radius: 20px;
}
.timeBar {
  width: 70vw;
  height: 4vw;
  opacity: 1;
  border-radius: 1000px;
  background: rgba(4, 38, 56, 0.64);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.controlGroup {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  gap: 5%;
  padding-left: 2%;
}
.controlIcon {
  cursor: pointer;
  width: 2vw;
  height: 2vw;
}
.progress-bar-container {
  display: flex;
  flex-direction: row;
  padding-right: 2vw;
  justify-content: space-between;
  align-items: center;
  gap: 2vw;
}
.vue-slider {
  width: 40vw !important;
}
.dateSelect {
  width: 12vw;
}
</style>
